package icu.bughub.app.app.viewmodel

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import icu.bughub.app.app.model.entity.VideoEntity
import icu.bughub.app.app.model.service.VideoService

class VideoModel : ViewModel() {

    var videoList by mutableStateOf<List<VideoEntity>>(
        listOf(
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/news_ls/O_BcvMewCePreBWZinVCjNtitDLVYQ3quG3AmNE5ohB4AAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/O55sLwkLEjsmlaZgg_h_O8FsoDbYJD4w3uGyr5heujkacAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/news_ls/OtHeqyX7FjqAsBm3h82vSINzO8h162qoVDsQIQUJS64rgAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ), VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ),
            VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            ), VideoEntity(
                title = "行测老师告诉你如何制定适合自己的学习方案",
                type = "视频课程",
                thumbnailUrl = "https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0",
                duration = "00:02:00"
            )
        )
    )
        private set

    private val videoService = VideoService.instance()

    var videoLoadSuccess by mutableStateOf(value = false)
        private set

    private var pageSize: Int = 10
    private var pageOffset: Int = 1

    var refresh by mutableStateOf(value = false)
        private set

    var hasLoadMore: Boolean = false
        private set

    suspend fun fetchList() {
        videoLoadSuccess = false
        val res = videoService.videoList(pageOffset, pageSize)
        if (res.code == 0 && res.data != null) {
            val tempList = mutableListOf<VideoEntity>()
            if (pageOffset != 1) {
                tempList.addAll(videoList)
            }
            tempList.addAll(res.data)
            videoLoadSuccess = true
            refresh = false
            hasLoadMore = res.data.size >= pageSize
            videoList = tempList
        }
    }


    suspend fun refresh() {
        refresh = true
        pageOffset = 1
        fetchList()
    }


    suspend fun loadMore() {
        if (hasLoadMore) {
            pageOffset++
            fetchList()
        }

    }

    var videoTitle by mutableStateOf("行测老师告诉你如何制定适合自己的学习方案")
        private set

    var content = """
          <span style="color:#333333;font-size:16px  ;">${this.videoTitle}</span>
<div class="article-container">
        <!-- 文章标题 -->
      
        
        <h1>春日野餐指南：解锁户外美食新体验</h1>
        
        <!-- 作者信息 -->
        <div class="author-info">
            作者：小野 | 发布时间：2024年4月10日 | 分类：生活方式
        </div>

        <!-- 主图（带图注） -->
        <img src="https://picsum.photos/800/500?random=1" 
             alt="春日草坪野餐场景" 
             class="hero-image">
        <div class="caption">阳光正好，铺一块格子布，摆上爱吃的点心，春日野餐就这样开始啦～</div>

        <!-- 正文内容 -->
        <div class="section">
            <h2>为什么选择春天野餐？</h2>
            <p>春天是一年中最适合野餐的季节——气温回升但不燥热，草木萌发带来清新的香气，连风里都带着花香。无论是公园的草坪、郊外的河边，还是小区的休闲区，都能成为你的「移动餐厅」。</p>
            <p>根据《城市户外活动报告》，春季野餐的热门选择中，<strong>轻食简餐</strong>占比高达68%，其次是水果拼盘（52%）和自制甜品（37%）。这说明「方便携带+高颜值」是春日野餐的核心需求。</p>
        </div>

        <!-- 分步骤指南 -->
        <div class="section">
            <h2>野餐必备清单（附挑选技巧）</h2>
            
            <h3>1. 餐垫：舒适是关键</h3>
            <p>推荐选择<strong>防水防污+折叠便携</strong>的材质（如牛津布或防水聚酯纤维）。尺寸建议180cm×150cm以上，足够2-3人使用。</p>
            <img src="https://picsum.photos/600/400?random=2" 
                 alt="彩色格子餐垫" 
                 style="width: 100%; border-radius: 8px; margin: 15px 0;">
            <div class="caption">防水格子餐垫：耐脏易清洁，折叠后仅手掌大小</div>

            <h3>2. 食物：清爽不压手</h3>
            <p>避免带需要复杂保存的食物（如油炸食品），推荐：</p>
            <ul>
                <li>三明治/饭团（提前用保鲜膜分装）</li>
                <li>切盒水果（草莓、蓝莓、小番茄）</li>
                <li>低脂酸奶+燕麦脆（酸甜解腻）</li>
                <li>自制柠檬塔（冷藏后口感更佳）</li>
            </ul>

            <h3>3. 饮品：冰爽又健康</h3>
            <p>推荐气泡水（配青柠片）、冷泡茶（红茶/乌龙茶）或鲜榨果汁（用保温袋+冰袋保存）。避免玻璃瓶装饮料，以防破碎。</p>
        </div>

        <!-- 小贴士 -->
        <div class="tip-box">
            <strong>野餐后清洁小技巧</strong>：  
            带一小包湿纸巾和便携式垃圾袋，离开前将食物残渣和包装分类处理。如果草坪允许，可将可降解的餐垫直接铺在地上，减少对环境的影响～
        </div>

        <!-- 结尾 -->
        <div class="section" style="margin-top: 40px;">
            <p>春日的风里藏着花香，草地上传来欢笑，这样的时光值得被好好收藏。下次野餐时，不妨试试这些小技巧，让每一口食物都带着春天的味道～</p>
            <p style="color: #7f8c8d; font-size: 0.9em;">📸 摄影：@自然生活家 | 📍 地点：城市生态公园</p>
        </div>
    </div>
    """.trimIndent()


    val htmlHeader = """
       <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春日野餐指南 | 享受户外好时光</title>
    <style>
        /* 基础样式 */
        body {
            font-family: '微软雅黑', sans-serif;
            line-height: 1.8;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .article-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            font-size: 2.2em;
            margin-bottom: 15px;
            border-bottom: 2px solid #e74c3c;
            padding-bottom: 10px;
        }

        .author-info {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 30px;
        }

        .hero-image {
            width: 100%;
            max-width: 600px;
            height: auto;
            border-radius: 10px;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .caption {
            font-size: 0.9em;
            color: #666;
            text-align: center;
            margin: 10px 0 25px;
            font-style: italic;
        }

        .section {
            margin: 30px 0;
        }

        .tip-box {
            background: #fff8f8;
            padding: 20px;
            border-left: 4px solid #e74c3c;
            margin: 20px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>

  """.trimIndent()


    val htmlFooter = """
 </body>
</html>
    """.trimIndent()


    var videoDesc by mutableStateOf(value = "${this.htmlHeader}${this.content}${this.htmlFooter}")
        private set

    var videoUrl by mutableStateOf("https://v-cdn.zjol.com.cn/280443.mp4")
        private set

    var coverUrl by mutableStateOf("https://inews.gtimg.com/om_ls/Ow2lku6kEUs9xAgqg9bJS8Kaz0JhyrGT_1m80oZEeuzwAAA_870492/0")

    var infoLoad by mutableStateOf(false)

    suspend fun fetchVideoInfo() {
        infoLoad = false
        val res = videoService.info("")
        if (res.code == 0) {
            val videoInfo = res.data
            videoTitle = videoInfo.title
            videoUrl = videoInfo.video
            coverUrl = videoInfo.thumbnailUrl
            content = videoInfo.desc
            infoLoad = true
            videoDesc = "${this.htmlHeader}${this.content}${this.htmlFooter}"
        }
    }
}